<script setup lang="ts">
import ImgPreview from '@/components/img-preview/index.vue';
import { useThemeToken } from '@/hooks';
import type { ListItem } from '@/types';
import { ManOutlined, WomanOutlined } from '@ant-design/icons-vue';

const token = useThemeToken();

defineProps<{
	item: ListItem;
}>();
</script>

<template>
	<a-card class="w-260 card">
		<template #cover>
			<ImgPreview></ImgPreview>
		</template>
		<div class="flex justify-between items-center mb-10">
			<div class="font-600">
				{{ item.Name || '-' }}
				<ManOutlined v-if="item.Sex === 1" class="color-blue" />
				<WomanOutlined v-else class="color-pink" />
				</div>
			<div>
				<a-tag :color="token.colorPrimary" class="mr-0">在职</a-tag>
			</div>
		</div>
		<a-form-item class="mb-0" label="年龄">{{ item.Age }}</a-form-item>
		<a-form-item class="mb-0" label="职位">{{ item.Role }}</a-form-item>
		<a-form-item class="mb-0" label="组别">标准服务一组</a-form-item>
		<a-form-item class="mb-0" label="联系电话"> {{ item.Phone }}</a-form-item>
	</a-card>
</template>
<style lang="less" scoped>
.card {
	:deep(.ant-card-body) {
		padding: 10px;
	}

	:deep(label) {
		color: #999;
	}
}
</style>
